<template>
  <div class="menu">
    <el-menu
      router
      class="el-menu-vertical"
      unique-opened
      :default-active="$route.path.split('/main/')[1]"
      @select="handleSelect"
      background-color="#1c3e66"
      text-color="#93a7b7"
      active-text-color="#fff"
      :collapse="$store.state.isCollapse"
      :style="getStyle"
    >
      <div id="outer">
        <div class="inner">
          <el-menu-item index="/main/index" class="index">
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu v-for="item in menuLists" :key="item.id" :index="item.menuName">
            <!-- <i :class="{ 'icon-project': true, active: active == '2' }"></i> -->
            <span slot="title">{{ item.menuName }}</span>
            <template v-if="item.children.length != 0">
              <el-menu-item-group>
                <el-menu-item
                  v-for="subMenu in item.children"
                  :key="subMenu.id"
                  :index="subMenu.menuUrl"
                >{{ subMenu.menuName }}</el-menu-item>
              </el-menu-item-group>
            </template>
          </el-submenu>
        </div>
      </div>
    </el-menu>
  </div>
</template>
<script>
//import { NativeEventSource, EventSourcePolyfill } from 'event-source-polyfill';

export default {
  data() {
    return {
      isCollapse: false,
      active: sessionStorage.currentActive || "/main/index",
      badgeNum: 0,
      menuLists: []
    };
  },
  computed: {
    getStyle() {
      let width = this.$store.state.isCollapse ? 64 : 200;
      setTimeout(() => {
        document.getElementById("outer") &&
          (document.getElementById("outer").style.height =
            document.documentElement.clientHeight - 64 + "px");
      }, 500);
      if (this.$store.state.isCollapse)
        return `width: ${width}px;transition: width -2s ease;`;
      return `width: ${width}px;transition: width .2s ease;`;
    }
  },
  mounted() {
    document.getElementById("outer").style.height =
      document.documentElement.clientHeight - 64 + "px";
    window.addEventListener("resize", () => {
      document.getElementById("outer") &&
        (document.getElementById("outer").style.height =
          document.documentElement.clientHeight - 64 + "px");
    });
    // 获取后台Nav列表
    this.$common.$ajax("/sys/menu/nav", {}, "get").then(res => {
      console.log(res);
      this.menuLists = res.data.body.menuList;

      this.$store.state.navs = res.data.body.menuList;
    });
    // Server-Sent Events
    // const EventSource = NativeEventSource || EventSourcePolyfill;
    // let source = new EventSource(baseUrls + 'manage/getUnExecuteAlarm', {
    // headers: {
    // 'Content-Type': 'text/event-stream'
    // },
    // 'withCredentials': true
    // });
    // source.addEventListener('message', e => {
    // this.badgeNum = JSON.parse(e.data).value || 0;
    // localStorage.warningNum = this.badgeNum;
    // });
    // source.addEventListener('open', e => {
    // console.log('服务器连接成功...');
    // this.badgeNum = localStorage.warningNum || 0;
    // });
    // source.addEventListener('error', e => {
    // console.log('服务器连接出错！');
    // this.badgeNum = localStorage.warningNum || 0;
    // });
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {}
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.active = key;
    }
  }
};
</script>
<style lang="scss" scoped>
.menu {
  background: #1c3e66;
  position: fixed;
  height: 100%;
  top: 66px;

  .icon-home::before,
  .icon-project::before,
  .icon-store-energy::before,
  .icon-store-hot::before,
  .icon-room::before,
  .icon-sheet::before,
  .icon-system::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 20px;
    display: block;
  }

  .icon-home::before {
    background: url(../../assets/icon-home.png);
  }

  .icon-home.active::before {
    background: url(../../assets/icon-home-active.png);
  }

  .icon-project::before {
    background: url(../../assets/icon-project.png);
  }

  .icon-project.active::before {
    background: url(../../assets/icon-project-active.png);
  }

  .icon-store-energy::before {
    background: url(../../assets/icon-store-energy.png);
  }

  .icon-store-energy.active::before {
    background: url(../../assets/icon-store-energy-active.png);
  }

  .icon-store-hot::before {
    background: url(../../assets/icon-store-hot.png);
  }

  .icon-store-hot.active::before {
    background: url(../../assets/icon-store-hot-active.png);
  }

  .icon-room::before {
    background: url(../../assets/icon-room.png);
  }

  .icon-room.active::before {
    background: url(../../assets/icon-room-active.png);
  }

  .icon-sheet::before {
    background: url(../../assets/icon-sheet.png);
  }

  .icon-sheet.active::before {
    background: url(../../assets/icon-sheet-active.png);
  }

  .icon-system::before {
    background: url(../../assets/icon-system.png);
  }

  .icon-system.active::before {
    background: url(../../assets/icon-system-active.png);
  }

  .el-menu {
    border-right: none;

    span {
      margin-left: 24px;
    }
  }

  .el-menu-item.is-active {
    background-color: #3ae2cb !important;
  }

  .menu-item-logo {
    background-color: #1d2026 !important;
    height: 66px !important;
    cursor: default;

    &.is-disabled {
      opacity: 1;
    }
  }

  .el-menu-vertical:not(.el-menu--collapse) {
    min-width: 200px;
    min-height: 400px;
  }
}

#outer {
  overflow: hidden;
  height: 500px;

  .inner {
    height: 100%;
    margin-right: -17px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
